class Small_Big{
    constructor(){
        // 1. 选择元素
        this.box = document.querySelector(".box")
        this.sBox = document.querySelector(".sBox");
        this.sSpan = document.querySelector(".sBox span");
        this.sImg = document.querySelector(".sBox img");
        this.bBox = document.querySelector(".bBox");
        this.bImg = document.querySelector(".bBox img");
        this.ul = document.querySelector(".list");
        this.lis = document.querySelectorAll(".lis");
        this.left = document.querySelector(".left");
        this.right = document.querySelector(".right");
        // 2. 执行绑定事件
        this.addEvent();
        // this.zy();
    }
    
    addEvent(){
        const that = this;
        // 实现绑定事件
        // 进入
        this.sBox.onmouseover = function(){
            // 3. 执行显示
            that.show();
        }
        // 离开
        this.sBox.onmouseout = function(){
            // 4. 执行隐藏
            that.hide();
        }
        // 移动
        this.sBox.onmousemove = function(eve){
            const e = eve ? eve : window.event;
            // 5. 执行移动功能
            that.move(e);
        }
    }
    show(){
        // 实现显示
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";

        // 补全布局：设置遮罩层span的尺寸
        // 遮罩层span的尺寸 = 大图容器 / 大图 * 小图容器
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";

        // 提前获取span能移动的最大范围，方便将来重复使用
        this.maxLeft = this.sBox.offsetWidth-this.sSpan.offsetWidth;
        this.maxTop = this.sBox.offsetHeight-this.sSpan.offsetHeight;
    }
    hide(){
        // 实现隐藏
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
    move(e){
        // 实现有边界限定的拖拽
        let l = e.pageX - this.sSpan.offsetWidth/2 - this.box.offsetLeft;
        let t = e.pageY - this.sSpan.offsetHeight/2 - this.box.offsetTop;
        // 边界限定
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.maxLeft){
            l = this.maxLeft
        }
        if(t>this.maxTop){
            t = this.maxTop
        }
        // 设置span的位置
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        // 根据拖拽的位置计算比例
        const x = l / this.maxLeft;
        const y = t / this.maxTop;
        // 根据比例计算右侧大图需要移动的位置
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
}


class ChangeImg{
    constructor(){
        this.li = document.querySelectorAll(".lis");
        this.sImg = document.querySelector(".sBox img");
        this.bImg = document.querySelector(".bBox img");
        // 准备图片数据：中图和大图
        // 上一个图片的索引
        this.prev = 0;
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.li[this.prev].style.borderColor = "#c33";
        for(let i=0;i<this.li.length;i++){
            // 给每个li绑定索引
            this.li[i].index = i;
            // 绑定事件
            
            this.li[i].onmouseover = function(){
                // 清除上一个索引对应li的样式
                that.li[that.prev].style.borderColor = "#aaa";
                that.prev = this.index;
                that.li[that.prev].style.borderColor = "#c33";
                // 给当前li添加样式
                // this.className = "active";
                // 修改中图和大图的图片地址，为当前点击li的索引对应的数据
                that.sImg.src = that.mImgs[this.index];
                that.bImg.src = that.bImgs[this.index];
                // 将当前点击li的索引，设置给上一个索引，以备下次点击使用
                // console.log(that.prev);
            }
            
        }
    }
}
